<template>
	<view class="pages">
		<!-- #ifndef H5 -->
		<statusBar></statusBar>
		<!-- #endif -->
		<view>
			<view v-if="show2">
			<u-button type="success" size="mini" @click="getRegeo()" >获取位置</u-button>
			</view>
			<view v-if="show">
			<u-tag :text="addressName" type="success" />
			</view>
		</view>
		<!-- 搜索功能 -->
		<u-swiper :list="banner"></u-swiper>
		<uni-search-bar @click="searchClick" class="uni-search-box" v-model="keyword" ref="searchBar" radius="100"
				cancelButton="none" disabled :placeholder="inputPlaceholder" />
		<view class="cover-search-bar" @click="searchClick"></view>
		
		<!-- 首页宫格 -->
		<view class=grid>
			<u-grid :col="4"  @click="click">
				<u-grid-item v-for="(item,index) in icon" :index="index" :key="index" >
					<view :class="item.name"></view>
					 <iconfont :icon="item.name" ></iconfont> 
				<text class="grid-text">{{item.text}}</text>
				</u-grid-item>
			</u-grid> 
		</view>
		

			<u-tabs :list="listchoose" :is-scroll="false" :current="current1" @change="change"></u-tabs>
				<view v-show="current1==0">
					<view class="hot_good">
							<view class="good_list"  >
								<view class="good_item" v-for="(item,index) in flowList" :key="index"  >
									<view @click="godetail(item._id)">
									<u-lazy-load  :image="item.url" ></u-lazy-load>
									<view class="price">
										<text>￥{{item.total}}</text>
									</view>
									<view class="name">
										{{item.title}}
									</view>
									<view class="content">
										{{item.content}}
									</view>
									</view>
								</view>
							</view>
					</view>
				</view>
				
				
				
				<view v-show="current1==1">
					<view class="hot_good">
							<view class="good_list"  >
								<view class="good_item" v-for="(item,index) in buylist" :key="index"  >
									
									<view @click="click1(item._id)">
									<view class="name">
										{{item.title}}
									</view>
									<view class="content">
										{{item.content}}
									</view>
									<view class="adress">
										地址:{{item.adress}}
									</view>
									</view>
								</view>
							</view>
					</view>
				</view>
			
				
			
		
		<view><u-divider>没有更多了</u-divider></view>
	</view>
</template>

<script>
	var cdbRef, currentWebview;
	import statusBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar";
	import Gps from '@/uni_modules/json-gps/js_sdk/gps.js';
	import Unused from 'pages/list/unused';
	
	const gps = new Gps()
	
	export default {
		components: {
			statusBar,
		},
		computed:{
			inputPlaceholder(e){
				if(uni.getStorageSync('CURRENT_LANG') == "en"){
					return 'Please enter the search content'
				}else{
					return '请输入搜索内容'
				}
			}
		},
		
		data() {
			return {
				banner:[],
				addressName:'',
				show2:true,
				show:false,
				// 全屏选项卡的内容
				listchoose: [{
									name: '全部闲置'
								}, 
								 {
									name: '全部求购',
								}],
				current:'',
				//全屏选项卡活动单位
				current1:0,
				where: "",
				keyword: "",
				refreshState: 0,
				listHight: 0,
				list:[],
				//求购列表
				buylist:[],
				//闲置列表
				flowList:[],
				icon:[{name:"iconfont icon-shuma",text:'数码产品'},{name:"iconfont icon-dianqi",text:"家用电器"},{name:"iconfont icon-fuzhuang",text:"服装配饰"},{name:"iconfont icon-jiaju",text:"家居家装"},
				{name:"iconfont icon-xuexi",text:"学习用品"},{name:"iconfont icon-meizhuang",text:"美妆个护"},{name:"iconfont icon-bangong",text:"办公用品"},{name:"iconfont icon-muying",text:"母婴用品"},{name:"iconfont icon-yundong",text:'运动健身'},
				{name:"iconfont icon-qita",text:'其他'}]
			}
		},
		async onReady() {
			// #ifdef APP-NVUE
			this.listHight = uni.getSystemInfoSync().windowHeight - 96 + 'px'
			// #endif
			// #ifndef APP-NVUE
			this.listHight = 'auto'
			// #endif
			cdbRef = this.$refs.udb
		},
		onLoad(){
			this.getList()
			this.getbuy()
			this.getbanner()
			
		},
		async onShow() {
			this.keyword = getApp().globalData.searchText
			getApp().globalData.searchText = ''
			//这里仅演示如何，在onShow生命周期获取设备位置，并在设备或者应用没有权限时自动引导。设置完毕自动重新获取。
			//你可以基于他做自己的业务，比如：根据距离由近到远排序列表数据等
			// uni.showLoading({
			// 	title:"获取定位中"
			// });
			//默认h5端不获取定位
			// #ifndef H5
			let location = await gps.getLocation({geocode:true})
			console.log(location);
			// #endif
			// if(location){
			// 	uni.showToast({
			// 		title: JSON.stringify(location),
			// 		icon: 'none'
			// 	});
			// }
			// uni.hideLoading()
		},
		methods: {
			click1(_id){
							 
							 uni.navigateTo({
								 
							 	url:'/pages/list/buydetail?id='+_id
							 })
			},
			
			 godetail(_id){
				 
				 uni.navigateTo({
					 
				 	url:'/pages/list/detail?id='+_id
				 })
			 },
			searchClick(e) { //点击搜索框
				uni.hideKeyboard();
				uni.navigateTo({
					url: '/pages/list/search/search',
					animationType: 'fade-in'
				});
			},
			retry() {
				this.refresh()
			},
			refresh() {
				
				console.log(JSON.stringify(process.env.VUE_APP_PLATFORM));
				cdbRef.loadData({
					clear: true
				}, () => {
					uni.stopPullDownRefresh()
				})
				console.log('refresh');
			},
			onqueryerror(e){
				console.log(e);
			},
			getList(){
				const db = uniCloud.database() //代码块为cdb
				// 使用uni-clientDB
				db.collection('opendb-news-articles')
				  .where({
				   article_status:0
				  }).get()
				  .then((res)=>{
				   this.flowList=res.result.data
			
				  }).catch((err)=>{
				    console.log(err.code); // 打印错误码
				        console.log(err.message); // 打印错误内容
				  }) 
			},
			//获取求购列表
			getbuy(){
				const db =uniCloud.database()
				db.collection('buy1').where({
					article_status:0
				}).get()
				.then((res)=>{
					this.buylist=res.result.data
					
				})
			},
			click(e) {
					 uni.navigateTo({
					 	url:'../classfity/classfity?classfity='+e
					 })
			},
			
			//全屏选项卡改变活动单位
			change(index) {
							this.current1 = index;
							console.log(this.current1)
						},
						
			getRegeo() {  
			     
				 let that=this
				 uni.chooseLocation({
				     success: function (res) {
						 that.addressName=res.name
						 console.log(that.addressName)
						  that.show2=false
						  that.show=true
				     },
					
				 });
				  
			        }  ,
			getbanner(){
				
				const db =uniCloud.database()
				db.collection('opendb-banner')
				
				.get()
				.then((res)=>{
					var rammend=[];
					res.result.data.forEach(function(item,index,array){
						rammend.push(item.url)	
					})
					  this.banner=rammend
				})
				console.log(this.banner)
			}
		},
		onPullDownRefresh() {
			
			this.refresh()
		},
		onReachBottom() {
			this.loadStatus = 'loading';
						// 模拟数据加载
						setTimeout(() => {
							this.getList();
							this.loadStatus = 'loadmore';
						}, 1000)
		},
		
	}
</script>

<style scoped >

		
		.uni-search-box {
			background-color: #FFFFFF;
			position: sticky;
			top: 0;
			left: 0;
			/* #ifndef APP-PLUS */
			z-index: 9;
			/* #endif */
			/* #ifdef MP-WEIXIN */
			width: 580rpx;
			/* #endif */
		}
		
		
		.cover-search-bar{
			height: 50px;
			position: relative;
			top: -50px;
			margin-bottom: -50px;
			/* #ifndef APP-NVUE */
			z-index:999;
			/* #endif */
		}
		
		.hot_good{
			background:#eee;
			overflow:hidden;
			margin-top:10px;
			}
			.tit{
				height:50px;
				line-height:50px;
				color:#b50e03;
				text-align:center;
				letter-spacing:20px;
				background:#fff;
				margin:7rpx 0;
				}
			
			.good_list{
				display:flex;
				padding :0 15rpx;
				flex-wrap:wrap ;//换行
				justify-content:space-between;//左右间距
				}
				.good_item{
					background:#fff;
					width:355rpx;
					margin: 10rpx 0;
					padding:15rpx;
					box-sizing:border-box;//规定两个并排的带边框的框
					}
					image{
						width:80%;
						height:150px;
						display:block;
						margin:auto;
					}
					.price{
						color:#b50e03;
						font-size:36rpx;
						margin:15rpx 0 5rpx 0; //上右下左
						}
						text:nth-child(2){
							color:#ccc;
							font-size:28rpx;
							margin-left:7rpx;
							text-decoration: line-through;
						}
					
					.name{
						font-size:28rpx;
						line-height:50rpx;
						padding-bottom:15rpx;
						padding-top:10rpx;
						font-weight: bold;
					}
				    .content{
						font-size:20rpx;
					}
					.adress{
						font-size:28rpx;line-height:50rpx;
						padding-bottom:15rpx;
						padding-top:10rpx;
					}
			
		.grid-text{
			font-size: 10px;
		}
		
	

		
</style>